<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可复用过度</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/VUE/vue2.js"></script>
    <style>
        ul li {
            list-style: none;
        }
    </style>
    <style>
        .left{
            position: fixed;
            left: 0;
            top: 20px;
            bottom: 0;
        }

        .right{
            position: fixed;
            right: 0;
            top: 20px;
            bottom: 0;
        }

        /* 左边进场动画: 随便名字-enter-active */
        .left-enter-active {
            animation: left 1s;
        }

        /* 出场动画 */
        .left-leave-active {
            animation: left 1s reverse;
        }

        @keyframes left {
            0% {
                /*opacity: 0;*/
                transform: translateX(-100%);
            }

            100% {
                /*opacity: 1;*/
                transform: translateX(0px);
            }
        }

        /* 右边进场动画 */
        .right-enter-active {
            animation: right 1s;
        }

        /* 出场动画 */
        .right-leave-active {
            animation: right 1s reverse;
        }

        @keyframes right {
            0% {
                /*opacity: 0;*/
                transform: translateX(100%);
            }

            100% {
                /*opacity: 1;*/
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
<div id="box">
    <navbar>
        <template #show>
            <button @click="handleShowparent" >show</button>
        </template>
    </navbar>

    <!--    <transition name="isShow">-->    <!-- transition放到组件里面一样可以实现效果，而且提高了可复用性 -->
    <sidebar v-show="isShow" mode="left"></sidebar>
    <!--    </transition>-->
</div>
<script>
    Vue.component("navbar", {
        template: `<div>
            <slot name="show"></slot>
            <span>电影</span>
        </div>`
    })

    Vue.component("sidebar", {
        props:["mode"],
        template: `
            <transition :name="mode">    <!-- transition放到组件里面一样可以实现效果，而且提高了可复用性 -->
                <ul :class="mode" style="width: 300px; height: 100vh; background-color: skyblue;">
                    <li>111111</li>
                    <li>222222</li>
                    <li>33333333</li>
                    <li>444444444</li>
                    <li>555555555</li>
                    <li>6666666</li>
                    <li>777777777</li>
                    <li>88888888</li>
                    <li>99999999999</li>
                </ul>
            </transition>
        `
    })

    new Vue({
        el: "#box",
        data: {
            isShow: false,
        },
        methods: {
            handleShowparent() {
                console.log()
                this.isShow = !this.isShow
            }
        }
    })
</script>
</body>
</html>